<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	</head>
	<body>
		<div id="app">
			<hello1-com></hello1-com>
			<person-com></person-com>
		</div>
		<template id="hello1">
			<div>{{msg}}</div>
		</template>
		
		<!-- 定义模板 -->
		<template id="personTem">
			<div>
				{{num}}
			</div>
		</template>
		
	
		<script src="../js/vue.js"></script>
		<!-- 定义组件 -->
		<script>
			let hello1Com={
				data(){
					return{
						msg:"2133"
					}
				},
				template: "#hello1"
			}
			
			let personCom={
				data(){
					return{
						num:"2222" 
					}
				},
				template: "#personTem"
			}
			
			
			const app = new Vue({
				el:"#app",
				//定义局部组件
				components:{
					hello1Com: hello1Com,
					personCom: personCom,
					//如果kv值相同.则简化为key即可
				}
			})
			
		</script>
	</body>
</html>
